<template>
    <div class="scoreAll">
        <div class="basicInfo">
            <span>赛事名称：<b>xxx夏季网球大赛</b></span>
            <span>裁判长：<b>刘德华</b></span>
        </div>
        <div class="tableBox">
            <ul class="group">
                <li>
                    青年组男单<span class='peopleNum'>（16）</span>
                </li>
                <li>
                    青年组男单<span class='peopleNum'>（16）</span>
                </li>
                <li>
                    青年组男单<span class='peopleNum'>（16）</span>
                </li>
                <li>
                    青年组男单<span class='peopleNum'>（16）</span>
                </li>
                <li>
                    青年组男单<span class='peopleNum'>（16）</span>
                </li>
                <li>
                    青年组男单<span class='peopleNum'>（16）</span>
                </li>
            </ul>
            <div class="tableMain">
                <table>
                    <thead>
                        <tr>
                            <td colspan="3">抽签结果分析</td>
                            <td rowspan="2">分布情况</td>
                            <td rowspan="2">得分</td>
                        </tr>
                         <tr>                        
                            <td>省份</td>
                            <td>XX</td>
                            <td>XX</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan='3'>湖北省</td>
                            <td>21312</td>
                            <td rowspan="3">213分</td>
                        </tr>
                         <tr>
                            <td colspan='3'>湖南省</td>
                            <td>21312</td>
                        </tr>
                         <tr>
                            <td colspan='3'>江西省</td>
                            <td>213</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="btnGroup">
            <el-button type="primary" class='goMatchForm'>发布</el-button>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                rankList:[
                  
                ],
                hasDiy:false
            }
        },
        methods:{
            diy(){
                this.hasDiy = true;
            },
            cancle(){
                this.hasDiy = false;
            },
            goback(){

            }
        }
    }
</script>
<style lang="less" scoped>
.scoreAll{
    padding:20px;
    .basicInfo{
        background: rgba(66,185,131,.1);
        border-radius: 2px;
        line-height: 40px;
        height: 40px;
        padding: 15px;
        overflow: hidden;
        span{
            margin-right:20px;
        }
        .btnGroup{
            height: 60px;
            float: right;
            margin-right:20px;
        }
    }
    .tableBox{
        box-shadow: 0px 2px 5px #eaeaea;
        margin-top:20px;
        border:1px solid #eaeaea;
        padding-bottom:10px;
        .group{
            height: 40px;
            background-color: #F5F7FA;
            border-bottom: #727272;
            li{
                float: left;
                cursor: pointer;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color:#727272;
                padding:0 10px;
            }
            li:first-child{
                border-right:1px solid #eaeaea;
                border-bottom:0;
                background-color: #fff;
                color:#409EFF;
            }
            li:hover{
                color:#409EFF;
            }
            .hasClick{
                background-color: #409EFF;
                color:#fff;
            }
        }
        .tableMain{
            margin-top:20px;
            padding:0 20px;
            table{
                width: 100%;
                margin-top:10px;
                text-align: center;
                border-collapse:collapse;
                border-left:1px solid #eaeaea;
                border-top:1px solid #eaeaea;
                thead{
                    tr{
                        height: 30px;
                        background-color: rgba(66, 185, 131, 0.1);
                        td{
                            width: 20%;
                            border-right:1px solid #eaeaea;
                            border-bottom:1px solid #eaeaea;
                        }
                    }
                    tr:first-child{
                        td:first-child{
                            width: 60%;
                        }
                    }
                }
                tbody{
                    tr{
                        height: 40px;
                        td{
                            border-right:1px solid #eaeaea;
                            border-bottom:1px solid #eaeaea;
                            width: 20%;
                        }
                    }
                }
            }

        }
    }
     .btnGroup{
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }
}
</style>

